<template>
	<!-- fangzhi -->
	<view class="warp" :style="mix_diyStyle">
		
		<view class="containers" :style="{ backgroundImage: 'url(' + imgUrl + 'user/user_bg.png)' }">
			<view class="" style="width: 750rpx;height: 443rpx;">
				
			</view>
			<view class="toplist">
				<view class="t_left" @click="gomsg()">
					<view class="tl_left">
						<image style="width: 60rpx;height: 60rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/news.png" mode=""></image>
					     <text v-if="userCenterData && userCenterData.msgNum > 0">
					     	{{ userCenterData.msgNum > 9 ? '9+' : userCenterData.msgNum }}</text>
					</view>
					<view class="tl_right" style="margin-left: 10rpx;">
						<view class="tlr_top">
							最新消息
						</view>
						<view class="tlr_bottom">
							<span style="margin-right: 10rpx;">消息列表</span>
							<span>快速接收</span>
						</view>
					</view>
				</view>
				<view class="t_right" @click="godeptlist()">
					<view class="tr_left">
						<image style="width: 60rpx;height: 60rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/team.png" mode=""></image>
					</view>
					<view class="tr_right" style="margin-left: 10rpx;">
						<view class="trr_top">
							小组通讯
						</view>
						<view class="trr_bottom">
							<span style="margin-right: 10rpx;">团队管理</span>
							<span>简洁高效</span>
						</view>
					</view>
				</view>
			</view>
			<!-- 功能管理 -->
			<view class="center_list">
				<view class="c_list">
					<view @click="torouter(index,item)" class="cl_item" v-for="(item,index) in centerlist" :key="index">
						<view class="cli_top">
							<image style="width: 60rpx;height: 60rpx;" :src="item.icon" mode=""></image>
						</view>
						<view class="cli_bottom">
						{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<!-- 功能使用 -->
			<view class="bottom_list">
				<view class="bl_title">
					营销活动
				</view>
				<view class="bl_list">
					<view @click="toaddparter(item)" class="bll_item" v-for="(item,index) in bottomlist" :key="index">
						<view class="i_left">
							<view class="i_image">
								<image style="width: 60rpx;height: 60rpx;" src="" mode=""></image>
							</view>
							<view class="i_text">
								<view class="i_t_top" style="font-size: 26rpx;margin-bottom: 5rpx;">
									{{item.name}}
								</view>
								<view class="i_t_bottom" style="font-size: 24rpx;color: #c5c5c5;">
									{{item.text}}
								</view>
							</view>
						</view>
						<view class="i_right_button">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="bottom_b">
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		name:"homeIndex",
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				centerlist:[
					{name:'公司官网',id:10,icon:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/weiguanwang.png'},
					{name:'任务管理',id:0,icon:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/task.png'},
					{name:'客户管理',id:1,icon:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/customerg.png'},
					// {name:'商品管理',id:2,icon:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/commodity.png'},
					{name:'活动管理',id:3,icon:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/activity.png'},
					// {name:'直播管理',id:4,icon:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/liveview.png'},
					{name:'门店管理',id:5,icon:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/shopg.png'},
					// {name:'渠道管理',id:6,icon:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/channel.png'},
					// {name:'商学管理',id:7,icon:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/staduy.png'},
					// {name:'转播中心',id:8,icon:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/rebroadcast.png'},
					// {name:'AI中心',id:9,icon:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/AI.png'},
				],
				bottomlist:[
					// {name:'发布商品',text:'员工推广商品 实时提成'},
					{name:'发布任务',text:'发布员工任务 每日必推'},
					// {name:'发布素材',text:'员工推广素材 快速获客'},
					{name:'发起活动',text:'总部强力赋能 助力成交'},
					// {name:'发起直播',text:'员工转发直播 助力成交'},
					{name:'邀请团队',text:'赋能员工 助力获客成交'},
				],
				shoplist:[]
			};
		},
		computed:{
		 ...mapState(['hasLogin','userInfo','userCenterData']),	
		},
		onLoad() {
			// if(this.userCenterData.vendorId){
			// 	console.log('打印');
			// 	uni.setStorageSync('storeId', this.userCenterData.vendorId);
			// }
			
			// this.getshoplist()
			// console.log(this.hasLogin);
		},
		onShow() {
			if(this.userCenterData.vendorId){
				// console.log('打印');
				uni.setStorageSync('storeId', this.userCenterData.vendorId);
			}
			// this.getshoplist()
		},
		methods:{
			// 消息页面
			gomsg(){
				if(!this.hasLogin){
					uni.showToast({
						title:'请登录后进行操作',
						icon:'none'
					})
				}else{
					uni.navigateTo({
						url:"/standard/chat/list"
					})
				}
				
			},
			// 组织架构
			godeptlist(){
				if(!this.hasLogin){
					uni.showToast({
						title:'请登录后进行操作',
						icon:'none'
					})
				}else{
					uni.navigateTo({
						url:"/standard/deptlist/deptlist"
					})
				}
				
			},
			getshoplist(){
				this.$request({
					url:'v3/seller/front/vendor/member/list',
					data:{vendorMobile:this.userCenterData.memberMobile}
				}).then(res=>{
					this.shoplist=res.data.list
					this.shoplist.forEach(item=>{
						item.show=false
					})
				})
			},
			// 页面跳转
		 torouter(idx,val){
			 if(!this.hasLogin){
				 uni.showToast({
				 	title:'请登录后进行操作',
					icon:'none'
				 })
			 }else{
				// 任务管理
				if(val.id==0){
					 uni.navigateTo({
						  url:"/extra/task/task"
								 })
				}else if(val.id==1){
					 uni.navigateTo({
						 url:'/standard/mycustomer/mycustomer'
								 })
				}
				else if(val.id==2){
					 uni.showToast({
						 title:'请前往商户管理端操作',
						 icon:'none'
						})		 
				}
				else if(val.id==3){
						// uni.showToast({
						// 	title:'该功能暂未开放',
						// 	icon:'none'
						// })	
					  uni.navigateTo({
						 url:"/extra/activityList/activityList"
								  })
				}
				else if(val.id==4){
					uni.showToast({
						title:'该功能暂未开放',
						icon:'none'
					})		
									 
				}
				else if(val.id==5){
						// if(uni.getStorageSync('shopId')){
						// 	uni.navigateTo({
						// 		url:"/standard/store/shopHomePage?vid="+uni.getStorageSync('shopId')
						// 	})
						// }else 
						if(this.userCenterData.storeId){
							uni.navigateTo({
								url:"/standard/store/shopHomePage?vid="+this.userCenterData.storeId
							})
						}else{
							 uni.showToast({
								 title:'当前账号不存在店铺',
								 icon:'none'
										})
						}
						
					 // if(this.shoplist.length==0){
						//  uni.showToast({
						// 	 title:'当前账号不存在店铺',
						// 	 icon:'none'
						// 			})
						// 		}else{
						// 		uni.navigateTo({
						// 			url:'/standard/store/shopHomePage?vid='+this.shoplist[0].store_id
						// 		})	
						// 		}
				
				}
				else if(val.id==6){
					uni.showToast({
						title:'该功能暂未开放',
						icon:'none'
					})				 
				}
				else if(val.id==7){
					uni.showToast({
						title:'该功能暂未开放',
						icon:'none'
					})				 
				}
				else if(val.id==8){
					uni.showToast({
						title:'该功能暂未开放',
						icon:'none'
					})				 
				}else if(val.id==9){
					 uni.navigateTo({
						 url:"/standard/chartGPT/index"
								 })
									 
				}else if(val.id==10){
					 uni.navigateTo({
						 url:"/webcont/webindex/webindex"
								 })
									 
				} 
			 }
			
			  
			 
		 },
		 //新增
		 toaddparter(val){
			 if(!this.hasLogin){
				 uni.showToast({
				 	title:'请登录后进行操作',
				 	icon:'none'
				 })
			 }else{
				if(val.name=='发布任务'){
					 uni.navigateTo({
					 url:'/extra/addtask/addtask'
							 })
				}else if(val.name=='邀请团队'){
					 uni.navigateTo({
					 url:'/standard/deptlist/deptlist'
								 })
				}else if(val.name=='发布商品'){
					 uni.showToast({
					 title:'请前往商户管理端操作',
					 icon:'none'
								 })	
				}else if(val.name=='发起活动'){
					 uni.navigateTo({
					 url:'/extra/activeAdd/activeAdd'
								  })
				}
				else{
					  uni.showToast({
					     title:'该功能暂未开放',
						 icon:'none'
								 })	
				} 
			 }
			
		 }
		}, 
	
	}
</script>
<style>
	page {
		background: $bg-color-split;
		width: 750rpx;
		margin: 0 auto;
		position: relative;
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
.warp{
	// .svga {
	//     width: 200px;
	//     height: 200px;
	//     margin: 100px auto;
	// 	background-color: black;
	// }
	 position: relative;
	.containers{
		height: 100%;
		position: relative;
		background-size: 750rpx 443rpx;
		/* #ifdef MP||APP-PLUS */
		background-size: 750rpx calc(443rpx + var(--status-bar-height));
		/* #endif */
		background-repeat: no-repeat;
	}

   .toplist{
	   position: absolute;
	   padding: 40rpx 20rpx;
	   width: 700rpx;
	   height: 160rpx;
	   margin-left: 25rpx;
	   border-radius: 20rpx 20rpx 10rpx 10rpx;
	   background-color: #fff;
	   top: 128rpx;
	   display: flex;
	   justify-content: space-between;
	   .t_right,.t_left{
		   display: flex;
		  
		  .tr_right,.tl_left{
			  position: relative;
			   margin-right: 5rpx;
			   text {
			   	position: absolute;
			   	top: -6rpx;
			   	right: 0rpx;
			   	width: 26rpx;
			   	height: 26rpx;
			   	line-height: 26rpx;
			   	background: #ffffff;
			   	border-radius: 50%;
			   	font-size: 20rpx;
			   	font-family: PingFang SC;
			   	font-weight: 500;
			   	color: #ffffff;
			   	text-align: center;
			   	background-color: #ff152c;
			   }
		   }
		   .trr_top,.tlr_top{
			   font-size: 26rpx;
			   font-weight: 550;
		   }
		   .trr_bottom,.tlr_bottom{
			   font-size: 24rpx;
			   color: #cecece;
			   margin-top: 5rpx;
		   }
		   
	   }
	   
   }
   // 功能管理
	.center_list{
		position: absolute;
		padding: 40rpx 20rpx;
		width: 700rpx;
		margin-left: 25rpx;
		border-radius: 10rpx;
		background-color: #fff;
		top: 320rpx;
		.c_list{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.cl_item{
				padding: 10rpx 0;
				width: 120rpx;
				text-align: center;
			}
			
		}
	}
	// 功能使用
	.bottom_list{
		position: absolute;
		padding: 40rpx 20rpx;
		width: 700rpx;
		margin-left: 25rpx;
		border-radius: 10rpx;
		background-color: #fff;
		top: 660rpx;
		.bl_title{
			font-size: 28rpx;
			font-weight: 550;
		}
		.bl_list{
			.bll_item{
				padding: 20rpx 5rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #cecece;
				.i_left{
					display: flex;
					align-items: center;
				}
				.i_right_button{
					padding:10rpx  15rpx;
					background-color: #fc701e;
					border-radius: 30rpx;
					color: #fff;
					font-size: 24rpx;
				}
			}
		}
	}
	.bottom_b{
		width: 700rpx;
		height: 140rpx;
		// background-color: #fff;
		position: absolute;
		top: 1600rpx;
		left: 25rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}
}
</style>